import React, { Component } from 'react';
import styles from './TemplateItem.scss';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';

import initView from '@/cross/components/View';
const View = initView(styles);
import initText from '@/cross/components/Text';
const Text = initText(styles);
import initImage from '@/cross/components/Image';
const Image = initImage(styles);
import initImageBackground from '@/cross/components/ImageBackground';
import { ITemplate } from '../types';
import { $src } from '@/cross/utils';
const ImageBackground = initImageBackground(styles);

interface IProps {
  item: ITemplate;
}

const TemplateItem = ({ item }: IProps) => {
  return (
    <View
      className="template_item M-p-10 M-gb-click"
      style={{ backgroundColor: item.color || '#fff' }}
    >
      <ImageBackground className="template_item__pic" src={item.pic ? $src(item.pic[0]) : ''} />
      <View className="M-p-t-10">
        <Text className="M-f-s-12 M-f-c-333 M-f-w-b">{item.title}</Text>
      </View>
    </View>
  );
};

export default TemplateItem;
